<template>
  <div>
    <div class="main">
      <div>
        <el-card>
          <el-tree
            icon-class=" "
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <span
              slot-scope="{ node, data }"
              class="slot-t-node"
              style="margin-right: 10px"
            >
              <template>
                <i
                  :class="{
                    'el-icon-folder-add': !node.expanded,
                    'el-icon-folder-remove': node.expanded,
                    'el-icon-circle-plus-outline':
                      !node.expanded && data.type === 2,
                    'el-icon-remove-outline': node.expanded && data.type === 2,
                    'el-icon-star-on': data.type === 3,
                  }"
                  style="color: rgb(225, 85, 54)"
                />
                <span>{{ node.label }}</span>
              </template>
            </span>
          </el-tree>
        </el-card>
      </div>
      <div class="main2">
        <div class="main2-one">
          <div style="font-size: 20px; margin: 20px 0 5px 15px">
            <span>机构信息</span>
          </div>
          <el-form
            :model="formData"
            :disabled="disabled"
            class="form"
            label-position="left"
          >
            <el-form-item style="width: 280px" label="机构编号">
              <el-input v-model="formData.id" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item style="width: 280px" label="机构名称">
              <el-input v-model="formData.name" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item style="width: 280px" label="机构类型">
              <el-select v-model="formData.type" style="width: 200px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form
            :model="formData"
            :disabled="disabledBian"
            class="form"
            label-position="left"
          >
            <el-form-item style="width: 970px" label="机构地址">
              <el-select
                @change="changecityValue"
                v-model="DateList.province.name"
                style="width: 270px"
              >
                <el-option
                  v-for="item in ShenFen"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                @change="changecountyValue"
                v-model="DateList.city.name"
                style="width: 270px"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select v-model="DateList.county.name" style="width: 270px">
                <el-option
                  v-for="item in countyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form
            :disabled="disabledBian"
            :model="Xiangxi"
            class="form"
            label-position="left"
          >
            <el-form-item style="width: 280px" label="详细地址">
              <el-input v-model="address" style="width: 200px"></el-input>
            </el-form-item>
          </el-form>
          <el-form
            :model="Xiangxi"
            class="form"
            label-position="left"
            :disabled="disabled"
          >
            <el-form-item style="width: 280px" label="经度">
              <el-input
                v-model="Xiangxi.latitude"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item
              :disabled="disabledBian"
              style="width: 280px"
              label="纬度"
            >
              <el-input
                v-model="Xiangxi.longitude"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form
            :model="Xiangxi"
            :disabled="disabledBian"
            class="form"
            label-position="left"
          >
            <el-form-item style="width: 370px" label="机构负责人">
              <el-input
                v-model="Xiangxi.managerName"
                style="width: 280px"
              ></el-input>
            </el-form-item>
            <el-form-item style="width: 370px" label="机构电话">
              <el-input v-model="Xiangxi.phone" style="width: 280px"></el-input>
            </el-form-item>
          </el-form>
          <el-button @click="Dian" type="primary">编辑</el-button>
        </div>
        <div class="main2-two">
          <div style="margin-left: 10px; margin-top: 30px">
            <h2>员工信息</h2>
          </div>
          <div class="bottom">
            <el-table border :data="tabelDate">
              <el-table-column
                label="序号"
                type="index"
                width="50"
              ></el-table-column>
              <el-table-column prop="userId" label="员工编号"></el-table-column>
              <el-table-column prop="name" label="员工姓名"></el-table-column>
              <el-table-column prop="mobile" label="手机号"></el-table-column>
              <el-table-column label="所属机构">
                <template #default="{ row }">
                  {{ row.agency.name }}
                </template>
              </el-table-column>
              <el-table-column
                prop="account"
                label="系统账户"
              ></el-table-column>
              <el-table-column label="系统角色">
                <template #default="{ row }">
                  {{ row.roleNames[0] }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="账号状态">
                <template #default="{ row }">
                  {{ row.status === 1 ? "正常" : "不正常" }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAdressApi,
  getCityCountyApi,
  getShengFen,
  getTreeApi,
  getYuanGongApi,
} from "@/api/JchuDate";
// import mixin from "@/minxin/LoginOut";
export default {
  // mixins: [mixin],
  data() {
    return {
      treeData: [],
      tabelDate: [],
      disabled: true,
      disabledBian: true,
      formData: {},
      cityList: [],
      countyList: [],
      Xiangxi: {},
      DiZhi: {},
      address: "",
      addresss: "",
      DateList: {
        province: {},
        city: {},
        county: {},
      },
      ShenFen: [],
      page: {
        page: 1,
        pageSize: 5,
      },
      options: [
        {
          value: 1,
          label: "一级转运中心",
        },
        {
          value: 2,
          label: "二级转运中心",
        },
        {
          value: 3,
          label: "营业部",
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  created() {
    this.getTreeInfo();
  },
  methods: {
    async changecountyValue(value) {
      const res = await getCityCountyApi(value);
      console.log(res);
      this.countyList = res.data.data;
    },
    async changecityValue(value) {
      const res = await getCityCountyApi(value);
      console.log(res);
      this.cityList = res.data.data;
    },
    Dian() {
      this.disabledBian = false;
    },
    async handleNodeClick(data) {
      this.formData = data;
      // console.log(data);
      // console.log(typeof data.address);
      this.Xiangxi = data;
      const res = await getAdressApi(data.id);
      console.log(res.data.data);
      // console.log(data);
      this.address = res.data.data.address;
      // 获取员工数据
      const yuan = await getYuanGongApi(data.id, this.page);
      this.tabelDate = yuan.data.data.items;
      this.DateList = res.data.data;
      // 获取城市列表
      const res1 = await getCityCountyApi(this.DateList.province.id);
      this.cityList = res1.data.data;
      // 获取村列表
      const res2 = await getCityCountyApi(this.DateList.city.id);
      this.countyList = res2.data.data;
    },
    async getTreeInfo() {
      const res = await getTreeApi();
      const res1 = await getShengFen();
      // console.log(res1);
      this.ShenFen = res1.data.data;
      this.treeData = JSON.parse(res.data.data);
      // console.log(this.treeData);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .main {
  display: flex;
  justify-content: space-between;
  .el-card {
    height: 100%;
    width: 300px;
    background-color: white;
    //min-height: 100vh;
    border-radius: 8px;
    .el-tree-node__label {
      display: inline-block;
      margin: 8px 0;
      font-size: 16px;
    }
    .el-tree-node__content {
      height: 30px;
    }
    .el-tree-node__content:hover {
      //height: 30px;
      color: rgb(225, 85, 54);
    }
  }
  .main2 {
    .el-card {
      padding: 0;
    }
    .main2-one {
      margin-left: 20px;
      //margin-top: 20px;
      padding-top: 2px;
      width: 970px;
      height: 320px;
      background-color: white;
      border-radius: 8px;
      .el-form {
        margin-top: 10px;
        margin-left: 20px;
      }
      .form {
        margin-top: 10px;
        .el-form-item {
          float: left;
          margin-right: 25px;
        }

        //display: flex;
        //justify-content: space-between;
      }
    }
    .main2-two {
      margin-top: 15px;
      margin-left: 20px;
      border-radius: 8px;
      min-height: 300px;
      background-color: white;
      .bottom {
        margin: 10px;
      }
    }
  }
  .el-form {
    font-weight: bold;
  }
}
</style>
